<template>
  <div id="homepage">
    <!--第一层大盒子开始-->
    <div class="contentTop">
      <div id="myleft">
        <ul>
          <!--商品数量开始-->
          <li>
            <div class="goodsCount">
              <div class="left"><span class="el-icon-user-solid"></span></div>
              <div class="right">
                <div>商品数量</div>
                <count-to
                  :start-val="0"
                  :end-val="goodsCount"
                  :duration="3000"
                />
              </div>
            </div>
          </li>
          <!--商品数量结束-->
          <!--未发货单开始-->
          <li>
            <div class="invoice">
              <div class="left">
                <span class="el-icon-chat-dot-square"></span>
              </div>
              <div class="right">
                <div>未发货单</div>
                <count-to
                  :start-val="0"
                  :end-val="waitStockCount"
                  :duration="3000"
                />
              </div>
            </div>
          </li>
          <!--未发货单结束-->
        </ul>
      </div>
      <div id="myChart"></div>
    </div>
    <!--第一层大盒子结束-->
    <!--第二层大盒子开始-->
    <div class="contentBase">
      <div id="lineChart"></div>
      <div id="cakeregion"></div>
      <div id="cakeditch"></div>
    </div>
    <!--第二层大盒子结束-->
  </div>
</template>

<script>
import CountTo from "vue-count-to"; //引入数字插件
import HomePage from "@/api/homepage/HomePage"; //映入api
export default {
  name: "hello",
  data() {
    return {
      area: [], //订单地区
      channel: [], //订单渠道
      daysOrder: [], //七日订单日期
      daysSum: [], //七日成交金额日期
      goodsCount: 0, //商品数量
      waitStockCount: 0 //未发货单
    };
  },
  mounted() {
    HomePage.gain().then(res => {
      this.area = res.data.data.area; //订单地区
      this.channel = res.data.data.channel; //订单渠道
      this.daysOrder = res.data.data.daysOrder; //七日订单日期
      this.daysSum = res.data.data.daysSum; //七日成交金额日期
      this.goodsCount = res.data.data.goodsCount; //商品数量
      this.waitStockCount = res.data.data.waitStockCount; //未发货单
      this.drawLine(); //调用函数
    });
  },
  components: {
    //注册组件
    CountTo
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart")); //七日成交柱形图
      let lineChart = this.$echarts.init(document.getElementById("lineChart")); //七日成交金额折线图
      let cakeregion = this.$echarts.init(
        document.getElementById("cakeregion")
      ); //订单地区饼图
      let cakeditch = this.$echarts.init(document.getElementById("cakeditch")); //订单渠道饼图
      // 绘制柱形图
      myChart.setOption({
        color: ["#3398DB"], //颜色
        title: { text: "七日订单" }, //标题
        xAxis: {
          type: "category",
          axisTick: { show: false }, ///去x轴尺度
          data: this.daysOrder[0].map(item => item) //将时间渲染
        },
        legend: { data: ["订单数"], right: 0 }, //点击关闭
        yAxis: {
          name: "订单数", //副标题
          type: "value",
          axisTick: { show: false }, //去y轴尺度
          axisLine: { show: false } //去y轴尺度
        },
        series: [
          {
            name: "订单数",
            type: "bar",
            barWidth: "35%",
            data: [850, 920, 900, 920, 1300, 1400, 1390]
          }
        ]
      });
      // 绘制折线图
      lineChart.setOption({
        color: ["#3398DB"], //颜色
        title: {
          text: "七日成交金额" //标题
        },
        legend: {
          //点击关闭
          right: 0,
          data: ["订单数"]
        },
        grid: {
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: { show: false },
          data: this.daysSum[0].map(item => item)
        },
        yAxis: {
          name: "订单数",
          type: "value",
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: "订单数",
            type: "line",
            stack: "总量",
            data: [850, 940, 900, 940, 1350, 1400, 1390]
          }
        ]
      });
      //绘制地区饼图
      cakeregion.setOption({
        title: { text: "订单地区分布" },
        legend: { right: 0, data: ["地区分布"] },
        series: [
          {
            radius: "50%",
            type: "pie",
            name: "地区分布",
            data: this.area.map(item => ({
              name: item.key,
              value: item.value
            }))
          }
        ]
      });
      //绘制渠道饼图
      cakeditch.setOption({
        title: { text: "订单渠道分布" },
        series: [
          {
            radius: "50%",
            type: "pie",
            data: this.channel.map(item => ({
              name: item.key,
              value: item.value
            }))
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
/*主体开始*/
#homepage {
  padding-top: 30px;
  background: #f0f2f5;
  width: 100%;
}
/*第一层盒子*/
.contentTop {
  background: #f0f2f5;
  width: 100%;
  float: left;
  display: flex;
  justify-content: space-between;
}
/*第二层盒子*/
.contentBase {
  float: left;
  background: #f0f2f5;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-around;
}
.myleft {
  width: 40%;
}
/*柱形图*/
#myChart {
  margin-right: 100px;
  height: 300px;
  width: 800px;
}
/*折线图*/
#lineChart {
  margin-left: 10px;
  width: 480px;
  height: 300px;
}
/*地区饼图*/
#cakeregion {
  width: 350px;
  height: 300px;
}
/*订单渠道饼图*/
#cakeditch {
  width: 350px;
  height: 300px;
}
.goodsCount:hover .left span {
  background: #40c9c6;
  color: #fff;
  border-radius: 5px;
  transition: 0.5s;
}
.invoice:hover .left span {
  background: #36a3f7;
  color: #fff;
  border-radius: 5px;
  transition: 0.5s;
}

/*商品数量*/
ul {
  list-style: none;
}
li {
  margin-bottom: 40px;
  width: 235px;
  height: 108px;
  cursor: pointer;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}
li > div {
  height: 100%;
  display: flex;
}
.left {
  display: flex;
  width: 40%;
  height: 100%;
}

.goodsCount .left span {
  font-size: 48px;
  color: #40c9c6;
  margin: auto;
  padding: 16px;
  transition: 0.5s;
  border-radius: 5px;
}
.invoice .left span {
  font-size: 48px;
  color: #36a3f7;
  margin: auto;
  padding: 16px;
  transition: 0.5s;
  border-radius: 5px;
}
.right {
  width: 60%;
  height: 100%;
}
.right span {
  text-align: center;
  margin-left: 40px;
  font-weight: 600;
  font-size: 20px;
  color: #666;
}
.right > div {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  font-weight: 600;
  font-size: 17px;
  color: #666;
  margin-bottom: 10px;
}
</style>
